*{
	margin: 0;
	padding: 0;
	border: none;
}
html{
	font-size: 6.66vw;
}

/*
 * 设置html字体大小为100px body修正为16px 以解决google浏览器默认为12px的问题
 * 这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小
 * 视口宽度 1519 视口高度 734
 * 1vw 15 1vh 7
 * 
 *  */
a{
	outline: none;/*设置边框样式*/
	text-decoration: none;
	color: #359eff;
}
a:hover{
	color: #2b72ff;
}
a:focus{
	outline: 0;/*当元素获得焦点时 焦点框为0*/
}
ul.options{
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.options li:focus,ul.options li:hover{
	background: #eee;
}
ul.options li a {
	color: #000;
}
body{
	font-size: 16px;
	margin: 0;
	padding: 0;
	height: 100vh;
}
body .logo{
	position: fixed;
	top: 0;
	left: 0;
	background: url(../img/logo@2x.png) no-repeat;
	background-size: 0.36rem 0.43rem;
	background-image: image-set;
	z-index: 2;
	height: 0.43rem;
	line-height: 0.43rem;
	padding-left: 3.06vw;
	margin-left: 2vw;
	margin-top: 0.18rem;
	font-size: 0.36rem;
	display: block;
	color: #000;
}
body .side{
	position: fixed;
	top: 0;
	left: 0;
	height:100vh;
	width: 32vw;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

body .side img{
	display: block;
	width: 32vmax;
	height: 100vh;
	animation-name: drop;
	animation-duration: 3s;
}
.animation1 {
            animation: drop 2s ease;
    -webkit-animation: drop 2s ease;
}
@keyframes drop{
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
body .top{
	min-width: 5.6rem;
	top: 0;
	left: 0;
	text-align: right;
	position: relative;
	z-index: 1;
}
body .top .item{
	float: right;
	margin: 0.2rem 0.4rem 0 0;
	font-size: 0.16rem;
	color: rgba(0,0,0,.902);
	padding: 0.1rem 0 0;
	line-height: 0.24rem;
}
body .top .item>a{
	display: inline-block;
	color: #000;
}
body .top .feedback{
	margin-right: 0.6rem;
}
body .top .feedback a{
	color: #000;
	opacity:0.6;
}
body .top .feedback a:hover{
	opacity: 1;
}
body .top .lianghao{
	padding: 0;
}
body .top .lianghao .lianghao-entry{
	position: relative;
	display: block;
	float: right;
}
body .top .lianghao .lianghao-entry>img {
    position:absolute;
    left:0;
    bottom:0;
    z-index:1
}
body .top .lianghao .lianghao-entry>div{
	border-radius: 0.06rem;
	background: #f54444;
	background: linear-gradient(126deg,#fc4754,#ff794c)#f54444;
	height: 0.24rem;
	line-height: 0.24rem;
	font-size: 0.16rem;
	margin: 0.1rem 0 0 0.05rem;
	padding: 0 0.1rem 0 0.24rem;
	color: #fff;
	font-weight: 300;
}
body .top .lianghao .lianghao-detail{
	clear: both;
	width: 2.9rem;
	border-radius: 0.06rem;
	border: solid 0.01rem #eee;
	background-color: #fff;
	box-shadow: 0 0.03rem 0.08rem 0 rgba(0,0,0,0.12);
	overflow: hidden;
	padding: 0;
	
}
body .top .lianghao .lianghao-detail .upper{
	    border-bottom:solid 0.01rem #f0f0f0;
    	height:0.49rem;
   	 	position:relative
	
}
body .top .lianghao .lianghao-detail .upper .search-icon{
	display: block;
	position: relative;
	text-align: center;
	height: 0.49rem;
	width: 0.4rem;
	background: 0 0;
	float: right;
	border-left: solid 0.01rem #eee;
	z-index: 1;
	transition: none;
}
body .top .lianghao .lianghao-detail .upper .search-icon .search-icon-img {
    transition:none;
    margin:auto;
    background:url(../img/search@2x.png) no-repeat transparent center;
    background-size: 0.2rem 0.245rem;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0
}
body .top .lianghao .lianghao-detail .upper .search-icon:hover {
    background-color:#f54444;
    background-image:linear-gradient(54deg, #fc4754, #ff794c)
}
body .top .lianghao .lianghao-detail .upper .search-icon:hover .search-icon-img {
    background:url(../img/search-hover@2x.png) no-repeat center;
    background-size: 0.2rem 0.25rem;
}
body .top .lianghao .lianghao-detail .upper .search {
    margin-right:0.41rem;
    background:0 0;
    height:0.49rem;
    line-height:0.49rem;
    font-size:0.16rem;
    padding:0 0.1rem;
    border: none;
}
body .top .lianghao .lianghao-detail .upper .search .search-placeholder {
    position:absolute;
    left:0.1rem;
    top:0;
    background:#fff;
    font-weight:lighter;
    color:#aaa;
}
body .top .lianghao .lianghao-detail .upper .search input {
    width:2.35rem;
    background:0 0;
    position:relative;
    z-index:2;
    font-size:0.16rem;
}
body .top .lianghao .lianghao-detail .bottom {
    padding-top:0.24rem;
    font-size:0.16rem;
    text-align:center;
    line-height:0.14rem;
}
body .top .lianghao .lianghao-detail .bottom div {
    margin-bottom:0.24rem;
}
body .top .lianghao .lianghao-detail .bottom .suggest-detail {
    font-size:0.16rem;
}
body .top .lianghao .lianghao-detail .bottom .suggest-detail a {
    margin:0 0.05rem;
}
body .top .mail-entry{
	opacity: 0.6;
}
body .top .mail-entry:hover{
	opacity: 1;
}
body .top .mail-entry a{
	color: #000;
	background: url(../img/mail-entry@2x.png) no-repeat;
	background-size: 0.2rem 0.15rem;
	height: 0.15rem;
	line-height: 0.15rem;
	margin: 0.04rem 0;
	padding: 0 0 0 0.25rem;
}
body .top .language-entry{
	opacity: 0.6;
	color: #000;
}
body .top .language-entry:hover{
	opacity: 1;
}
body .top .language-entry>ul{
	list-style: none;
	text-align: left;
	padding-top: 0.08rem;
}
body .top .language-entry>ul li{
	padding-top: 0.16rem;
}
body .top .language-entry>ul li a{
	color:#888;
}
body .top .language-entry>ul li a:hover{
	color: #000;
	cursor: pointer;
}
body .main{
	position: absolute;
	padding-bottom: 0.1rem;
	top: 1rem;
	width: 50.66vw;
	left: 40.00vw;
	
}
body .main>.form{
	position: relative;
	margin: 0 auto;
	width: 4.8rem;
}
body .main>.form .welcome{
	font-size: 0.44rem;
	margin-bottom: 0.2rem;
}
body .main>.form .header{
	font-size: 0.28rem;
	margin-bottom: 0.64rem;
	line-height: 0.336rem;
	color: #333;
}
body .main>.form .free-lianghao-entry{
	float: right;
}
body .main>form form .input-area{
	position: relative;
}
body .main>form form .input-area .input-flags{
	position: absolute;
	right: 0;
	height: 0.52rem;
	z-index: 1;
}
/*body .main>.form form .input-area .input-flags .eye{
	background: url(../img/eye@2x.png);
	width: 0.44rem;
	height: 0.36rem;
	display: block;
	float: right;
	margin: 0.08rem 0.1rem;
	background-size: 0.4rem 0.3rem;
}    
body .main>.form form .input-area .input-flags .eye.close {
	background: url(../img/eye-close@2x.png);
	background-size: 0.4rem 0.3rem;
}*/
/*导致显示问题 待解决*/
body .main>.form form .input-area .input-flags .input-ok {
    background:url(../img/tick.png) no-repeat;
    width:0.2rem;
    height:0.15rem;
    display:block;
    float:right;
    margin:0.18rem 0.1rem;
}
body .main>.form form .input-area .input-placeholder {
    position:absolute;
    font-size:0.2rem;
    line-height:0.2rem;
    padding:0.16rem 0.2rem;
    background:#fff;
    z-index:-1;
    font-weight:lighter;
    color:#aaa
}
body .main>.form form .input-area .input-outer {
	background: 0 0;
	margin: 0.24rem 0 0;
}
 body .main>.form form .input-area .input-outer input {
    border:1px #aaa solid;
    border-radius:0.04rem;
    background:0 0;
    text-align:left;
    font-size:0.2rem;
    width:4.38rem;
    height:0.5rem;
    line-height:0.5rem;
    padding:0 0.2rem;
}
body .main>.form form .input-area .input-outer .password-raw {
    font-size:0.2rem;
    background:#fff;
    position:absolute;
    margin:0 0.2rem;
    width:4.38rem;
    height:0.5rem;
    line-height:0.5rem;
    top:0.01rem;
    left:0.01rem;
}
body .main>.form form .input-area .input-outer input:hover {
    border-color:#777
}
body .main>.form form .input-area .input-outer input:focus {
    border-color:#549df8
}
body .main>.form form .input-area .input-outer input.error {
    color:#ff5b5b;
    border-color:#ff5b5b
}
body .main>.form form .password-tips-group {
    height:0.78rem;
    line-height:0.78rem;
    overflow:hidden
}
body .main>.form form .password-tips-group .password-tips {
    background:url(../img/info@2x.png) no-repeat;
    background-size: 0.18rem 0.18rem;
    padding:0 0 0 0.24rem;
    font-size:0.14rem;
    line-height:0.18rem;
    margin:0.08rem 0 0.08rem;
}
body .main>.form form .password-tips-group .password-tips.ok {
    background-image:url(../img/green@2x.png);
    background-size: 0.18rem 0.18rem;
}
body .main>.form form .error-tips-wrap {
    padding-top:0.08rem;
    height:0.18rem;
    overflow:hidden;
    position:relative;
    line-height:0.18rem;
}
body .main>.form form .error-tips-wrap .error-tips {
    background:url(../img/error@2x.png) no-repeat;
    background-size: 0.18rem 0.18rem;
    padding:0 0 0 0.24rem;
    color:#ff5b5b;
    font-size:0.14rem;
    line-height:0.18rem;
    height:0.18rem;
    overflow:hidden;
    position:absolute;
    bottom:0;
}
body .main>.form form .error-tips-wrap .error-tips.slideup {
    top:-0.26rem;
}
body .main>.form form .input-tips-wrap {
    position:relative;
    overflow:hidden;
    height:0.20rem;
    line-height:0.20rem;
}
body .main>.form form .input-tips-wrap .input-tips {
    font-size:0.14rem;
    height:0.20rem;
    color:#999;
    white-space:nowrap;
    overflow:hidden;
    position:absolute;
    bottom:0;
}
body .main>.form form .selector {
    position:absolute;
    right:3.26rem;
    top:0;
    height:0.52rem;
    line-height:0.52rem;
    padding-right:0.12rem;
}
body .main>.form form .selector img {
    vertical-align:middle;
}
body .main>.form form .input-area.code-area, body .main>.form form .input-area.nation-area{
    width:1.54rem;
}
body .main>.form form .input-area.code-area input.code, body .main>.form form .input-area.code-area input.nation, body .main>.form form .input-area.nation-area input.code, body .main>.form form .input-area.nation-area input.nation{
    width:1.12rem;
}
body .main>.form form .input-area.phone-area {
    float:right;
}
body .main>.form form .input-area.phone-area .input-outer {
    margin:0;
}
/*body .main>.form form .input-area.phone-area .input-outer input.phone {
    width:2.65rem;
}*/
body .main>.form form .input-area.phone-area .input-outer input.nickname-password {
    width:2.65rem;
    nickname-password
}
body .main>.form form .send-sms {
    border:1px #3083ff solid;
    border-radius:0.04rem;
    background-color:#3487ff;
    box-shadow:0 0.05rem 0.08rem 0 rgba(24, 95, 255, .1);
    color:#fff;
    text-align:center;
    font-weight:lighter;
    background-image:linear-gradient(0deg, #398bff, #3083ff);
  
    float:right;
    width:3.07rem;
    height:0.5rem;
    line-height:0.5rem;
    font-size:0.2rem;
}
body .main>.form form .send-sms:focus, body .main>.form form .send-sms:hover {
    background-color:#3580eb;
    background-image:linear-gradient(0deg, #3580eb, #2c79eb)
}
body .main>.form form .country {
    top:0.51rem;
    width:4.8rem;
    height:2rem;
}
body .main>.form form .country li {
    padding:0 0.2rem;
}
body .main>.form form .submit {
    border:1px #3083ff solid;
    border-radius:0.04rem;
    background-color:#3487ff;
    box-shadow:0 0.05rem 0.08rem 0 rgba(24, 95, 255,0.1);
    color:#fff;
    text-align:center;
    font-weight:lighter;
    background-image:linear-gradient(0deg, #398bff, #3083ff);
    width:4.78rem;
    height:0.6rem;
    margin:0.4rem 0 0.08rem;
    font-size:0.24rem;
}
body .main>.form form .submit:focus, body .main>.form form .submit:hover {
    background-color:#3580eb;
    background-image:linear-gradient(0deg, #3580eb, #2c79eb)
}
body .main>.form form .agreement {
    margin-top:0.16rem;
    line-height:0.18rem;
    font-size:0.14rem;
}
body .main>.form form .agreement #agree, body .main>.form form .agreement #qzone {
    display:none;
}
body .main>.form form .agreement .checkbox {
    line-height:0.3rem;
    font-size:0.13rem;
    color:#aaa;
}
body .main>.form form .agreement .checkbox img {
    vertical-align:middle;
}

body .main>.form form .agreement .agreement-list {
    padding-left:0.18rem;
}
body .main>.form form .agreement .agreement-list a {
    display:block;
}
body .main>.footer {
    font-size:0.14rem;
    color: #999;
    text-align:center;
    margin:0.3rem 0;
}


@media  screen and (max-width: 76.937em ) {
	body .top .lianghao .lianghao-entry>img {
    position:absolute;
    left:-0.09rem;
    bottom:0;
    z-index:1
}
}
@media screen and (max-width: 56.25em) {
	body .top .lianghao{
		display: none;
	}
}
@media screen and (max-width:50em) {
	body .side img{
		display: none;
	}
	body .logo{
	position: fixed;
	top: 0;
	left: 30vw;
	background: url(../img/logo@2x.png) no-repeat;
	background-size: 0.36rem 0.43rem;
	background-image: image-set;
	z-index: 2;
	height: 0.43rem;
	line-height: 0.43rem;
	padding-left: 3.06vw;
	margin-left: 2vw;
	margin-top: 0.18rem;
	font-size: 0.36rem;
	display: block;
	color: #000;
	}
}
@media screen and (max-width: 41.25em){
html{ 
	font-size: calc( 44.8px + (24 - 16) * (100vw - 400px) / (800 - 400) ); 
}
}
@media screen and (max-width: 32.375em) {
	body .logo{
		display: none;
	}
}
